<template>
  <basic-container>
    <el-row class="row-bg" gutter="20">
      <el-col span="12">
        <div id="pie-chart" class="bg-purple-light chart-container"></div>
      </el-col>
      <el-col span="12">
        <div id="bar1-chart" class="bg-purple-light chart-container"></div>
      </el-col>
    </el-row>
    <el-row class="row-bg" gutter="20">
      <el-col span="12">
        <div id="bar2-chart" class="bg-purple-light chart-container"></div>
      </el-col>
      <el-col span="12">
        <div id="bar3-chart" class="bg-purple-light chart-container"></div>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
  import echarts from 'echarts';

  export default {
    data() {
      return {
        form: {
          area: '',
          power: ''
        },
        pie1: {
          instance: null,
        },
        bar2: {
          instance: null,
        },
        bar1: {
          instance: null,
        },
        bar3: {
          instance: null,
        }

      }
    },
    methods: {
      genData(count) {
        var nameList = [
          '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
        ];
        var legendData = [];
        var seriesData = [];
        var selected = {};
        for (var i = 0; i < count; i++) {
          var name = Math.random() > 0.65
            ? makeWord(4, 1) + '·' + makeWord(3, 0)
            : makeWord(2, 1);
          legendData.push(name);
          seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
          });
          selected[name] = i < 6;
        }

        return {
          legendData: legendData,
          seriesData: seriesData,
          selected: selected
        };

        function makeWord(max, min) {
          var nameLen = Math.ceil(Math.random() * max + min);
          var name = [];
          for (var i = 0; i < nameLen; i++) {
            name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
          }
          return name.join('');
        }
      },
      getPieOpt() {
        var data = this.genData(50);

        return {
          title : {
            text: '同名数量统计',
            subtext: '纯属虚构',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: data.legendData,

            selected: data.selected
          },
          series : [
            {
              name: '姓名',
              type: 'pie',
              radius : '55%',
              center: ['40%', '50%'],
              data: data.seriesData,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
      },
      initPieChart() {
        var dom = document.getElementById('pie-chart');

        this.pie1.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.pie1.instance.setOption(this.getPieOpt());
        var self = this;
        window.addEventListener('resize', function () {
          self.pie1.instance.resize();
        });
      },
      getBar1Opt() {
        return {
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015'],
              ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
              ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
              ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
            ]
          },
          xAxis: [
            {type: 'category', gridIndex: 0},
            {type: 'category', gridIndex: 1}
          ],
            yAxis: [
          {gridIndex: 0},
          {gridIndex: 1}
        ],
          grid: [
          {bottom: '55%'},
          {top: '55%'}
        ],
          series: [
          // These series are in the first grid.
          {type: 'bar', seriesLayoutBy: 'row'},
          {type: 'bar', seriesLayoutBy: 'row'},
          {type: 'bar', seriesLayoutBy: 'row'},
          // These series are in the second grid.
          {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
          {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
          {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
          {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
        ]
        }
      },
      initBar1Chart() {
        var dom = document.getElementById('bar1-chart');

        this.bar1.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.bar1.instance.setOption(this.getBar1Opt());
        var self = this;
        window.addEventListener('resize', function () {
          self.bar1.instance.resize();
        });
      },
      getBar2Opt() {
        return {
          title: {
            text: '世界人口总量',
              subtext: '数据来自网络'
          },
          tooltip: {
            trigger: 'axis',
              axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['2011年', '2012年']
          },
          grid: {
            left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
            type: 'value',
              boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
              data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
          },
          series: [
            {
              name: '2011年',
              type: 'bar',
              data: [18203, 23489, 29034, 104970, 131744, 630230]
            },
            {
              name: '2012年',
              type: 'bar',
              data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
          ]
        }
      },
      initBar2Chart() {
        var dom = document.getElementById('bar2-chart');

        this.bar2.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.bar2.instance.setOption(this.getBar2Opt());
        var self = this;
        window.addEventListener('resize', function () {
          self.bar2.instance.resize();
        });
      },
      getBar3Opt() {
        return {
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ['product', '2015', '2016', '2017'],
              ['Matcha Latte', 43.3, 85.8, 93.7],
              ['Milk Tea', 83.1, 73.4, 55.1],
              ['Cheese Cocoa', 86.4, 65.2, 82.5],
              ['Walnut Brownie', 72.4, 53.9, 39.1]
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
          ]
        }
      },
      initBar3Chart() {
        var dom = document.getElementById('bar3-chart');

        this.bar3.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.bar3.instance.setOption(this.getBar3Opt());
        var self = this;
        window.addEventListener('resize', function () {
          self.bar3.instance.resize();
        });
      },

    },
    mounted() {

      this.initPieChart();
      this.initBar1Chart();
      this.initBar2Chart();
      this.initBar3Chart();

    }
  }

</script>

<style>
  .query-container {
    margin-bottom: 0 !important;
  }
  .query-container .el-row,
  .query-container .el-col,
  .query-container .el-form-item{
    margin-bottom: 0;
  }
  .chart-container {
    padding: 2vh 1vh;
    height: 520px;
  }

  .progress-label {
    text-align: right;
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
